<template>
  <div class="ad-chart-w">
    <Title>
      <template #content>
        <p class="title">ROAS排行TOP20</p>
      </template>
    </Title>
    <div class="type-w">
      <a-radio-group type="button" v-model="orderDimension" @change="refreshData">
        <a-radio value="SHOP">店铺</a-radio>
        <a-radio value="CAMPAIGN">活动</a-radio>
        <a-radio value="PRODUCT">商品</a-radio>
      </a-radio-group>
    </div>
    <a-table style="margin-top: 20px" :loading="tableLoading" class="table-singe-line" ref="tableRef" row-key="id" :bordered="false" :data="tableList" :scroll="{ y: '380px' }" size="mini" :pagination="false">
      <template #columns>
        <a-table-column :width="40" title="排名" align="center" key="ranking">
          <template #cell="{ rowIndex }">
            <a-image v-if="rowIndex === 0" src="https://cdn2.selleroa.com/yfni/test/16988035636233c4fab.png" :width="22" :height="22" />
            <a-image v-else-if="rowIndex === 1" src="https://cdn2.selleroa.com/yfni/test/1698803563624402b76.png" :width="22" :height="22" />
            <a-image v-else-if="rowIndex === 2" src="https://cdn2.selleroa.com/yfni/test/16988035636040c2841.png" :width="22" :height="22" />
            <p v-else>{{ rowIndex + 1 }}</p>
          </template>
        </a-table-column>
        <a-table-column :width="160" title="店铺" v-if="orderDimension == 'SHOP'" data-index="name" key="shop">
          <template #cell="{ record }">
            <TextLimit :val="record.name" />
          </template>
        </a-table-column>
        <a-table-column :width="160" title="活动" v-if="orderDimension == 'CAMPAIGN'" data-index="name" key="campaign">
          <template #cell="{ record }">
            <TextLimit :val="record.name" />
          </template>
        </a-table-column>
        <a-table-column :width="160" title="ASIN" v-if="orderDimension == 'PRODUCT'" data-index="name" key="asin">
          <template #cell="{ record }">
            <div class="flex-c">
              <ImgPopover :src="record.asinImageUrl || record.asinSmallImageUrl" :isPre="true">
                <template #con>
                  <a-image width="34" :preview="false" height="34" fit="contain" :src="record.asinSmallImageUrl || record.asinImageUrl" />
                </template>
              </ImgPopover>
              <a-typography-paragraph copyable :copy-text="record.asinUrl" style="margin-bottom: 0" :copy-tooltip-props="{ mini: true }">
                <a-button style="line-height: 34px; height: 34px; margin-left: 4px" type="text">{{ record.name }}</a-button>
              </a-typography-paragraph>
            </div>
          </template>
        </a-table-column>
        <a-table-column :width="80" align="right" data-index="cost" key="cost">
          <template #title>
            <p>
              <span>广告花费</span>
              <span>({{ currencySymbol[searchParams.currencyCode] }})</span>
            </p>
          </template>
        </a-table-column>
        <a-table-column :width="90" align="right" data-index="saleAmount" key="saleAmount">
          <template #title>
            <p>
              <span>广告销售额</span>
              <span>({{ currencySymbol[searchParams.currencyCode] }})</span>
            </p>
          </template>
        </a-table-column>
        <a-table-column :width="80" align="right" data-index="roas" title="ROAS" key="roas" />
      </template>
    </a-table>
  </div>
</template>
<script lang="ts" setup>
  import Title from '@/views/index/components/Title.vue'
  import { ref } from 'vue'
  import { getOverallRanking } from '@/api/advert'
  import { currencySymbol } from '@/utils/globalData'
  const props = defineProps({
    searchParams: {
      type: Object,
      default: () => {},
    },
    targetMap: {
      type: Object,
      default: () => {},
    },
  })

  const tableList = ref<Array<any>>([])
  const tableLoading = ref(false)
  const orderDimension = ref('SHOP')

  // 刷新数据
  async function refreshData() {
    getTableList()
  }
  async function getTableList() {
    if (!props.searchParams.startDate) return
    tableLoading.value = true
    const res: any = await getOverallRanking({
      ...props.searchParams,
      orderDimension: orderDimension.value,
      orderType: 'ROAS',
    })
    tableLoading.value = false
    tableList.value = res?.data || []
  }

  defineExpose({ refreshData })
</script>
<style lang="less" scoped>
  .ad-chart-w {
    margin-top: 10px;
    background-color: #fff;
    padding: 20px;
    position: relative;
  }
  .type-w {
    position: absolute;
    top: 15px;
    right: 20px;
  }

  :deep(.arco-radio-group-button) {
    padding: 0;
    .arco-radio-button {
      margin: 0;
      background-color: #fff;
      line-height: 26px;
      border: 1px solid var(--color-border);
      &:first-child {
        border-radius: 4px 0 0 4px;
      }
      &:last-child {
        border-radius: 0 4px 4px 0;
      }
    }
    .arco-radio-checked {
      border-color: rgb(var(--primary-6));
    }
  }
</style>
